<template>
  <div class="header">
    <div class="left">
      <ReloadOutlined @click="refreshCurrentPage()" />
    </div>
    <div class="right" @mouseleave="hideAdminAccountOption()" @mouseover="showAdminAccountOption()">
      欢迎您：<span class="name">{{ adminLoginName }}（{{ adminLoginPosition }}）</span>
    </div>
    <div v-show="isShowAdminAccountOption" id="admin_account_option" @mouseleave="hideAdminAccountOption()"
      @mouseover="showAdminAccountOption()">
      <div class="option_list">
        <div @click="chgAdminAccountPwd()">修改密码</div>
        <div id="header-login-account-logout" @click="adminLogout()">退出登录</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import { ReloadOutlined } from '@ant-design/icons-vue';

const { adminLogout } = inject('adminLogout');  // 依赖注入--退出登录函数
const { adminLoginName,adminLoginPosition } = inject('adminLoginInfo');  // 依赖注入--登录账户信息
const { refreshCurrentPage } = inject('refreshCurrentPage');  // 依赖注入--刷新当前页面

let setTimeOutId = ref(0);
let isShowAdminAccountOption = ref(false); // 是否显示管理员账户选项

const showAdminAccountOption = () => {
  clearInterval(setTimeOutId.value);
  isShowAdminAccountOption.value = true;
}

const hideAdminAccountOption = () => {
  setTimeOutId.value = setTimeout(() => {
    isShowAdminAccountOption.value = false;
  }, 300);
}

//修改密码
const chgAdminAccountPwd = () => {
  // 修改密码
}

</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  width: 100%;
}

.left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 100px;
}

.left>.logo {
  max-height: 40px;
}

.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  margin-left: 12px;
  font-size: 14px;
  cursor: pointer;
}

.right>.name {
  font-weight: bold;
  font-size: 16px;
}

#admin_account_option {
  width: 150px;
  position: absolute;
  top: 63px;
  right: 24px;
  z-index: 5;
}

#admin_account_option>.option_list {
  background-color: #E1E1E1;
  padding: 5px 20px 5px 20px;
  border-radius: 5px;
}

#admin_account_option>.option_list>div {
  text-align: center;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px dashed #cacaca;
  cursor: pointer;
}

#admin_account_option>.option_list>div:last-child {
  border-bottom: none;
}
</style>